/* 盒模型一 */
.box01 {
  /* 
  border就是边框,参数1是边框的宽度，参数2是边框线的类型，参数3是边框颜色
  */
  border: 1px solid #ff0000;
  /*
  padding是内边距，简单的理解就本元素里面的元素分开的间距
  四个值分别代表上右下左
  如果是两个参数表示上下和左右
  如果是一个参数表示上下左右一样
  */
  padding: 1rem 2rem 3rem 4rem;
  /*
  margin是外边距，表示本元素和外面的元素分开距离
  参数的语义和padding一样
  rem（强烈推荐的单位），绝对单位值，是浏览器基础字体大小的倍数
  默认情况下基础字体大小是16px，css3带来的新单位，可以是小数
  */
  margin: 1rem 2rem;
}

/* 进阶的盒模型 */
.box02 {
  border: 1px dotted #ff00ff;
  /* 宽度和高度 */
  width: 15rem;
  height: 3rem;
  /*
  块元素（div，ul，li，hn，p...）,特色就是占满一整行空间
    默认显示模式（display）为block
  行内元素（span，i，b），特色就是一个挨着一个，内容决定宽高
    默认显示模式为inline
  行内元素无法正确的处理盒模型样式，比如宽高外边距
  */
}
